<template>
	
	<el-form :inline="true" :model="queryWhere" class="demo-form-inline">
		<el-form-item label="角色名称:">
		  <el-input v-model="queryWhere.roleName" placeholder="请输入角色名称" clearable />
		</el-form-item>
	   
		<el-form-item>
		  <el-button type="primary" >查询</el-button>
		</el-form-item>
	</el-form>
	
	
	<el-row justify="space-between">
		<el-col :span="10">
			{{selectedRoleId.length==0?false:true}}
			<el-button type="primary" @click="dialogVisible = true;dialogTitle='新增'" >新增</el-button>
			<el-button type="danger"   :disabled="selectedRoleId.length>0?false:true" @click="batchDelete">批量删除</el-button>
		</el-col>
		<el-col :span="1">
			<el-button circle></el-button>
		</el-col>
	</el-row>
	
	
	
	<el-table :data="pageInfo.list" @select-all="selectRow"  @select="selectRow" style="width: 100%">
		<el-table-column type="selection"></el-table-column>
	    <el-table-column prop="role_name" label="角色名称" width="180" />
	    <el-table-column prop="remark" label="备注" width="180" />
	    <el-table-column prop="create_time" label="创建时间" />
		
		
		<el-table-column label="操作">
			<!--在某一列表中增加自定义的内容(按钮)
			首先在el-table-column标签内部需要加一个子元素template,然后在template添加要显示的组件即可
			-->
		     <template #default="scope">
				<el-button type="primary" v-on:click="updateRow(scope.row)">修改</el-button>
				<el-button type="default">删除</el-button>
		     </template>
		</el-table-column>
		
		
	</el-table>
	  <el-pagination
	        v-model:current-page="pageInfo.pageNum"
	        v-model:page-size="pageInfo.pageSize"
	        :page-sizes="[5,10,15,20,100]"
	         size="default"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="pageInfo.total"
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	      />
	  
	  
	
	  
<el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="600"

  >  
  <!--ref=myFomr就是组件的id-->
     <el-form ref="myForm" :model="roleInfo" :rules="dialogRules" label-width="100px">
	  <el-form-item label="角色名称"  prop="role_name">
		<el-input v-model="roleInfo.role_name" autocomplete="off" />
	  </el-form-item>
	  <el-form-item label="备注" prop="remark" >
		<el-input v-model="roleInfo.remark" autocomplete="off" />
	  </el-form-item>
	  <el-form-item label="授权">
		   <el-tree
				ref ="roleTree"  
		      style="max-width: 600px"
		      :data="menuTreeData"
		      :props="treeProps"
			  show-checkbox
			  node-key="menu_id" 
			  v-on:check="treeCheckChange"
		    />
			<!--:node-key="menu_id" 表示将服务端返回的menu对象的menu_id做为树节点的key-->
	  </el-form-item>
	</el-form>
	
	
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
		
		<!--saveRole方法的参数值是el-from组件的ref属性值   ref="myForm"
			它代表el-from组件
		-->
		
	
        <el-button type="primary" v-on:click="saveRole">确定</el-button>
      </div>
    </template>
  </el-dialog>	
	
	
</template>

<script setup>
	import {ref,onMounted,getCurrentInstance} from 'vue';
	import {ElMessage} from'element-plus'
	
	let queryWhere = ref({
		roleName:"",
		pageNum:1,
		pageSize:3
	})
	let {proxy} = getCurrentInstance()
	let  pageInfo = ref({})//代表服务端返回的pageInfo对象
	
	let initData= ()=>{
		proxy.$axios.get("/sysRoleController/queryDataByPage",{params:queryWhere.value})
			.then((serverData)=>{
				if (serverData.data.code==0){
					pageInfo.value = serverData.data.data;
				}else{
					ElMessage({type:"error",message:serverData.data.msg})
				}
			})
	}
	
	let handleSizeChange = (pageSize)=>{
		console.log("handleSizeChange",pageSize)
		queryWhere.value.pageSize = pageSize;
		initData();
	}
	
	
	let handleCurrentChange = (pageNum)=>{
		console.log("handleCurrentChange",pageNum)
		queryWhere.value.pageNum = pageNum;
		initData();
	}
	
	onMounted(()=>{
		initData();
		loadMenuTreeData();
	})
	
	
	//**拿到菜单表中的一级菜单和二级菜单
	let menuTreeData = ref([]);//服务端返回的菜单树数组
	let treeProps = {
		label:"name"
	}
	let loadMenuTreeData = ()=>{
		
		proxy.$axios.get("/SysMenuController/queryMenuDataTree")
			.then((serverData)=>{
				if (serverData.data.code==0){
					menuTreeData.value = serverData.data.data;
				}else{
					ElMessage({type:"error",message:serverData.data.msg})
				}
		})
	}
	
	//当树节点中的复选框被点击的时候触发
	let roleTree  = ref();//代表树组件 即ref=roleTree的那个组件
	let treeCheckChange=(data ,checked,childrenChedked)=>{
		console.log(data ,checked,childrenChedked)
		/*let checkNodes =   roleTree.value.getCheckedNodes();
		for(let i=0;i<checkNodes.length;i++){
			console.log(checkNodes[i].name,checkNodes[i].menu_id)
		}*/
		
		let getCheckedKeys =   roleTree.value.getCheckedKeys();
		console.log(getCheckedKeys)
		let getHalfCheckedKeys = roleTree.value.getHalfCheckedKeys();
		console.log(getHalfCheckedKeys)
		
		//getCheckedKeys.splice(0,0,getHalfCheckedKeys)
		for(let i=0;i<getHalfCheckedKeys.length;i++){
			getCheckedKeys.push(getHalfCheckedKeys[i])
		}
		
		console.log("合并后的数组为:",getCheckedKeys)
		
		roleInfo.value.menuIdList = getCheckedKeys;//把选中的菜单编号赋给roleInfo对象，用于提交数据给后端
	}
	
	
	
	const dialogVisible = ref(false) ;//控制对话框的展示与隐藏
	
	let dialogTitle = ref('新增')
	
	//let msg =ref('hello');
//	msg.value

	let myForm = ref();//在vue中，当用ref函数定义一个变时，变量的名称与某个组件的ref属性相同时，该变量就代表那个组件
	
	//elFormObject就是saveRole方法
	let saveRole = ()=>{//点击弹出对话框中的确定按钮
		//在点击确定按钮时，要对表单的数据做验证，即执行验证规则
		//1.要在el-form标签上定义一个ref属性 如： ref="myForm"  ,可以把ref=myForm理解为html元素的id属性 
		//2 在脚本中定义一个变量名为myForm ,如： let myForm = ref()
		//3.调用myForm组件的validate函数 ,该函数需要传递一个匿名函数，匿名函数的参数valid表示验证结果
		
		console.log("myFrom对象为:",myForm)
		//console.log("elFormObjec",elFormObject)
		myForm.value.validate((valid,fields)=>{
			if (valid){
			
				if (dialogTitle.value=='新增'){
					//alert('访问后端的新增接口')
					proxy.$axios.post("/sysRoleController/saveRole",roleInfo.value)
						.then((serverData)=>{
							if (serverData.data.code==0){
								ElMessage({type:"success",message:"添加成功"})
								initData();
							}else{
								ElMessage({type:"error",message:serverData.data.msg})
							}
						})
					
				}else{
					alert('访问后端的修改接口')
				}
			}
		});
		//myForm.validate()
		
	}
	

	const roleInfo = ref ({
                "role_id": null,
                "role_name": "",
                "remark": "",
                "menuIdList": []
       })
	   
	   //定义表单验证规则
	let dialogRules = ref({
		role_name:[
			//required: true 表示必需输入值 ,message: '请输入角色名称'表示值为空时的提示信息
			//trigger: 'blur' 表示在失去焦点时触发验证
			{ required: true, message: '请输入角色名称', trigger: 'blur' },
			//以下规则表示输入的值的长度必需是35个
			{ min: 2, max: 10, message: '角色名只能是2-20个字符', trigger: 'blur' },
		],
		remark:[
			{ required: true, message: '请输入备注信息', trigger: 'blur' },
		]
	})
	
	
	
	//点击表格行的修改按钮
	let updateRow= (rowData)=>{
		dialogTitle.value = "修改"
		dialogVisible.value = true;
		roleInfo.value.role_name = rowData.role_name;
		roleInfo.value.role_id = rowData.role_id;
		roleInfo.value.remark = rowData.remark;
		//roleInfo.value.menuIdList = rowData.menuIdList;
	}
	
	
	//当用户手动勾选表格数据行的 Checkbox 时触发的事件
	//selection代表当前选中的元素，返回一个数组
	let selectedRoleId = ref([]) //用于存储当前要批量删除的角色编号	
	let selectRow = (selection,row)=>{
		selectedRoleId.value = [];
		console.log(selection,row)
		for(let i=0;i<selection.length;i++){
			console.log("选中行的角色名为:",selection[i].roleName)
			selectedRoleId.value.push(selection[i].roleId)
		}
		console.log("要删除的角色编号为:",selectedRoleId.value)
	}
	let batchDelete =()=>{
		//用异步请求将selectedRoleIdo数组中的元素值传递给后端
		console.log("要删除的角色编号为:",selectedRoleId.value)
	}
	
	
	
	
	
	
</script>

<style>
</style>